<template>
  <ex_select_auto :value="selectValue" :urlParams="printClientParam" :listHandler="clientListHandler" storeData
    :placeholder="$t('tip_please_select_any', { any: $t('label_printer') })" :clearable="clearable"
    :url="printClientUrl || $url['print/getOnlineClientInWarehouse']" @changeItem="changeClientPrint" />
</template>

<script>

export default {
  props: {
    clientId: null,
    printerName: null,
    printClientUrl: null,
    printClientParam: {
      type: Object,
      default: () => { },
    },
    clearable: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    selectValue() {
      return this.buildOnlyKey(this.clientId, this.printerName)
    }
  },
  methods: {
    buildOnlyKey(clientId, printerName) {
      if (clientId && printerName) {
        return clientId + '@@' + printerName
      } else {
        null
      }
    },
    clientListHandler(list) {
      const out = _.concat([], ...list.map(it => _.isEmpty(it.printerConfigList) ? [] : it.printerConfigList.map(pr => (
        {
          value: this.buildOnlyKey(it.clientId, pr.printerName),
          label: it.customerClientName + ' - ' + pr.printerName + ` - (${pr.paperSize})`,
          clientId: it.clientId,
          printerName: pr.printerName,
        }
      ))))
      return out
    },
    changeClientPrint(e) {
      if (e) {
        this.$emit('update:clientId', e.clientId)
        this.$emit('update:printerName', e.printerName)
      } else {
        this.$emit('update:clientId', null)
        this.$emit('update:printerName', null)
      }
    },
  },
}
</script>
